<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07事件监听</title>
</head>
<body>
    <button onclick="alert('点击事件')">弹出事件窗口</button>
    <button id="btn">我是按钮</button>
    <h4>哈哈哈哈哈哈哈哈哈</h4>
    <hr>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid atque cupiditate dicta dolores
            et eveniet id illum ipsa necessitatibus officiis porro possimus quibusdam quod ratione recusandae, rem
            tenetur vel.
        </div>
        <div>Accusantium at iste, nesciunt quaerat quisquam repudiandae totam. Accusamus alias asperiores autem cumque,
            doloremque eos est exercitationem id ipsam iste maiores molestiae molestias nobis praesentium quidem
            recusandae reiciendis repudiandae sed.
        </div>
        <div>Aperiam commodi dolorem ipsam itaque laborum odio officiis omnis. Accusantium incidunt magni, nulla
            obcaecati officiis possimus praesentium quibusdam tempora tempore tenetur! At consectetur ex in laboriosam,
            laborum minima nulla tenetur.
        </div>
        <div>Adipisci aliquam aperiam blanditiis consectetur culpa, deserunt eos impedit incidunt iste laborum maiores
            omnis quod repellendus sapiente similique suscipit totam ullam velit voluptate voluptatibus! Aspernatur
            assumenda aut dicta nesciunt voluptatem.
        </div>
        <div>Aliquid animi, deleniti dolores eaque hic maxime nostrum pariatur sunt. Deserunt dignissimos eaque expedita
            labore nesciunt quae quasi rem rerum velit. Aperiam blanditiis consequatur doloribus maiores optio qui
            suscipit temporibus?
        </div>
        <div>A blanditiis dolor dolorem, quas repudiandae sequi! Aliquid architecto, blanditiis dolore eius error ipsam
            itaque, minima necessitatibus officia omnis ratione recusandae rem sint temporibus veritatis! Eius eveniet
            fugiat molestias unde.
        </div>
        <div>Adipisci, alias aliquam animi asperiores assumenda at commodi ea eligendi est exercitationem fugit ipsam
            labore minima molestias neque omnis perspiciatis placeat possimus praesentium quis quisquam rerum soluta
            unde vel vero?
        </div>
        <div>Alias blanditiis corporis cumque delectus dignissimos dolorum eligendi esse eum illo illum, ipsum magni,
            minima nihil pariatur, quos vero voluptatum? Ad amet aspernatur expedita incidunt officia vero! Blanditiis
            illo, quibusdam.
        </div>
        <div>Ad atque beatae ea, eveniet impedit ipsa iusto libero maxime, minus natus necessitatibus nihil optio
            placeat quas quod ratione recusandae rem repudiandae sequi veritatis. Deleniti magni neque praesentium
            voluptas voluptatem.
        </div>
        <div>Aliquid commodi consectetur consequatur culpa cumque deleniti dolor ea, fuga in iure, magnam nostrum
            officia praesentium provident quas repellat temporibus vel? Ad aliquam atque consectetur delectus iusto,
            laborum modi quas?
        </div>
        <div>Assumenda error modi obcaecati sapiente voluptas. Asperiores cum earum nam nisi, pariatur quo repellendus.
            Assumenda dolores hic porro possimus quasi. At eum fuga fugiat nesciunt numquam perspiciatis qui ratione
            sequi!
        </div>
        <div>At debitis dolorum fugiat inventore magni molestias nihil nostrum nulla officia praesentium, quas qui,
            reprehenderit totam? Accusantium, alias architecto, consequuntur culpa enim illum, nobis nulla porro
            possimus quibusdam repellendus unde.
        </div>
        <div>Ad adipisci doloremque dolores, iure neque quis quos rerum sapiente vel. At commodi debitis doloribus earum
            expedita illo ipsam, maiores placeat possimus praesentium quibusdam quod rem sed sunt veniam voluptatem!
        </div>
        <div>Eius eveniet ipsam iste neque tempore temporibus ullam veritatis. Alias, architecto commodi corporis cum
            ducimus ea exercitationem hic illo ipsa, itaque laboriosam minima minus omnis quo recusandae totam
            veritatis, voluptas.
        </div>
        <div>Architecto asperiores beatae culpa cum deserunt, et excepturi exercitationem odit quis quos repellendus,
            sint, temporibus! Accusamus beatae dolore earum eos natus pariatur ratione repellat voluptatibus? Architecto
            fugiat obcaecati quia rerum.
        </div>
        <div>Animi impedit molestias nemo obcaecati omnis perspiciatis quibusdam sed ullam unde veniam. Accusantium
            consequuntur, dolore dolorum esse explicabo fugit impedit magnam mollitia nihil nisi nobis, quod rem
            repellat sint tenetur!
        </div>
        <div>Aliquam aspernatur aut blanditiis, cum cupiditate, dolorem eius facere harum hic ipsa laborum minima
            mollitia nam non porro quae quaerat quasi qui rem repellendus tempora tenetur vitae voluptas voluptate
            voluptatem!
        </div>
        <div>Architecto, distinctio dolores ea exercitationem expedita facilis fuga ipsum iusto labore, necessitatibus
            nihil nostrum perferendis placeat quas qui quis sint sit tempora unde, vitae. Beatae cupiditate excepturi
            necessitatibus quod veniam.
        </div>
        <div>Ab alias amet consectetur cumque dicta dolorem, eaque fugiat harum illo ipsum laboriosam libero nemo nulla,
            odit omnis, quis sint temporibus unde ut velit! Aspernatur at facilis fuga maxime voluptatibus!
        </div>
        <div>Ad amet asperiores cupiditate doloremque eos esse et illo itaque iusto natus, nesciunt perferendis quo
            repellat repudiandae, sunt ut, voluptate. Ab delectus dolore facere laborum natus necessitatibus quasi
            reiciendis reprehenderit?
        </div>
        <div>Alias culpa cumque cupiditate delectus dicta dolore eius, eveniet explicabo inventore ipsam iusto libero
            maxime, mollitia necessitatibus nostrum obcaecati odio placeat, possimus reiciendis repellat rerum sint
            temporibus tenetur veritatis voluptatibus.
        </div>
        <div>Hic laudantium necessitatibus placeat quam quos, rem suscipit vel! At eaque in nostrum unde veniam!
            Accusantium amet cumque dolor eligendi exercitationem impedit minus natus numquam perspiciatis quas ut vel,
            voluptatum.
        </div>
        <div>A animi cum cumque deleniti dolorem excepturi facilis, quo rerum sit vitae. Consequatur culpa dolorum ea
            est harum molestias mollitia nemo omnis quibusdam quis reiciendis sequi tempora tempore velit, vitae!
        </div>
        <div>Aperiam blanditiis est id ipsam iure minus saepe ut? Ea laudantium molestiae perferendis reiciendis
            reprehenderit! Aliquam animi culpa distinctio eos illo illum quas quo vel voluptas! Consequuntur dicta
            dignissimos quibusdam.
        </div>
        <div>Accusamus architecto dolore dolorem eos et iste laborum neque provident quis saepe suscipit, unde vitae.
            Cumque eius eos et sed! Ad delectus, dolore fugit ipsam ipsum nulla similique totam. Nobis.
        </div>
        <div>Ad alias architecto dolorem et explicabo in, itaque magni similique ut! A consectetur dolores eaque error
            expedita harum necessitatibus perspiciatis quaerat quam quas qui quibusdam repellat, sed? Alias, dolorum
            enim.
        </div>
        <div>Consectetur cumque ipsam iusto magnam maxime molestias nam quidem voluptatibus. Animi aperiam dicta dolorem
            ea earum recusandae saepe sequi tempore unde voluptatibus. Accusamus at earum explicabo minima natus quo
            ullam?
        </div>
        <div>Ad alias dolorem fuga in magni minus obcaecati quasi quibusdam, reiciendis repellat. Ad aliquam asperiores
            consequatur cum cumque dignissimos enim harum iste laudantium minima, nihil porro qui quidem quo vel!
        </div>
        <div>Aliquam culpa cum dolorem eaque eligendi expedita impedit laboriosam, laborum nostrum recusandae sint vero.
            Animi beatae cupiditate dicta dignissimos ea eius eveniet harum laboriosam, magnam numquam quia quisquam
            quod repudiandae.
        </div>
        <div>Accusamus, aliquid asperiores aut cum ducimus expedita explicabo fuga in iusto laudantium maxime minima
            nam, natus non praesentium quasi quidem temporibus ullam vitae voluptatum? Facilis labore maxime obcaecati
            reiciendis saepe!
        </div>
        <div>Autem fugit iure magni quam velit. Delectus doloremque illum itaque quam repudiandae. A, accusamus ad
            deleniti ducimus eaque error eum exercitationem ipsum iste iusto molestias perspiciatis quasi reiciendis
            sapiente, tenetur!
        </div>
        <div>Delectus itaque iure molestiae nemo quas veniam, voluptate voluptatibus? Accusantium beatae consectetur
            distinctio ipsum neque non obcaecati odio, quae similique tempore tenetur unde veniam vitae. Aliquid eveniet
            ex porro voluptatem.
        </div>
        <div>A accusamus animi at consectetur, consequatur cupiditate delectus deleniti dicta dolore eos ex expedita
            fugit labore magni minima nisi odio pariatur placeat quidem quo rerum sed sint, tempore temporibus
            voluptatum.
        </div>
        <div>Consectetur corporis eum illo officiis pariatur porro quia quisquam, temporibus. Amet asperiores eos ex
            fugiat id, maiores minus nam obcaecati quasi quos reiciendis, sed totam voluptatem. Eligendi facere
            molestiae recusandae.
        </div>
        <div>Nihil perferendis quos voluptatibus. Adipisci at consequatur dignissimos eligendi harum officiis quos
            temporibus? Ab consequuntur debitis delectus, expedita ipsam, iure libero nesciunt obcaecati officiis
            placeat quis quos reiciendis, ut vitae.
        </div>
        <div>Aliquid aspernatur assumenda at aut consequuntur, delectus distinctio dolore doloremque eum exercitationem
            id impedit minima molestiae nam, natus quos ratione rem repellat repellendus sint sit, totam unde ut velit
            voluptate?
        </div>
        <div>Amet aspernatur excepturi laboriosam maiores minima repellendus sit suscipit totam? Aliquam aspernatur
            culpa dolor dolores ea facere maxime minima quam quo quod ratione ullam, ut, voluptatem! Dolore magnam
            molestias vitae.
        </div>
        <div>Accusantium ea eius impedit iure modi molestiae natus necessitatibus nulla sed voluptatem? Amet autem
            dolorem, ducimus earum excepturi, harum, incidunt ipsa quam quas ratione sint ullam? Deleniti ex facere
            suscipit?
        </div>
        <div>Autem culpa eaque eius, error est inventore iste, laborum minima, nobis odit quibusdam sapiente tempore
            unde. Dolore in ipsam placeat! Ab excepturi exercitationem facere fuga hic iure laborum odio sed?
        </div>
        <div>Ab alias aliquam amet beatae corporis cum esse id illo incidunt ipsa, ipsam itaque laboriosam minus modi
            neque odio omnis praesentium quaerat ratione rem repudiandae rerum, tempore totam voluptatem voluptatibus?
        </div>
        <div>Dicta dolore illum minima numquam vel. Alias eos, facere iure labore optio placeat sequi sint veniam!
            Adipisci, aliquam culpa cum eius, itaque labore maiores odit praesentium sequi suscipit, ut vero?
        </div>
        <div>Amet animi aspernatur aut consequuntur deleniti eaque eligendi in ipsum praesentium, quae. Ab animi
            consequatur eaque id laboriosam libero, nesciunt nihil obcaecati odit placeat praesentium quisquam sapiente
            tempora voluptate voluptatem!
        </div>
        <div>Ad cumque dolore exercitationem in! Animi asperiores blanditiis delectus dolore doloremque eius eveniet
            facere fugit id impedit incidunt inventore laudantium magni molestiae nemo nulla numquam obcaecati,
            quibusdam recusandae reprehenderit rerum?
        </div>
        <div>A architecto assumenda debitis delectus deleniti dolore dolorum est maiores molestias necessitatibus
            nesciunt numquam officia porro praesentium quis reiciendis, similique sit veritatis. Animi, culpa doloribus
            eligendi error quos recusandae velit.
        </div>
        <div>Ad atque autem blanditiis consequuntur dicta facere facilis minus natus officia, provident quas recusandae.
            Accusamus distinctio doloribus eos eum explicabo, fuga harum inventore laudantium nisi, quaerat, quis
            reprehenderit suscipit totam!
        </div>
        <div>Animi cupiditate doloremque eius esse eum hic illo non! Asperiores aut consectetur consequatur, deserunt,
            dignissimos esse illum iusto molestias odio quod sint veritatis? At autem eum harum nam quos voluptas.
        </div>
        <div>Dicta dolor laborum nihil nulla officia repudiandae. Aliquid autem laboriosam porro quo reprehenderit
            tempore unde voluptas. Ad debitis dignissimos eaque libero, maxime obcaecati, omnis possimus quasi quibusdam
            ratione sequi veritatis.
        </div>
        <div>Accusamus accusantium aliquid dignissimos doloremque dolores eos est ex excepturi hic in ipsa, maxime neque
            nihil praesentium quisquam recusandae, rerum sapiente sequi tempore totam. Accusamus debitis iure possimus
            quos sint?
        </div>
        <div>Earum expedita incidunt laborum quisquam. Ab aut debitis deserunt, doloremque enim error fugiat incidunt
            ipsum natus odio omnis repellat sit. Assumenda ducimus eius ipsam laboriosam magni neque quaerat sunt vel.
        </div>
        <div>Aliquid culpa doloremque ea error impedit, omnis qui vel. A ad aliquid asperiores dolorem dolorum hic in
            ipsa, placeat provident qui quis repellendus repudiandae sint ut vel, velit voluptatem? Tenetur?
        </div>
        <div>A amet, animi aspernatur at dicta dignissimos dolor illum iusto laboriosam laudantium natus odio omnis quae
            temporibus ullam unde veritatis, voluptatem voluptatum! Animi consectetur eius facere ipsa nisi repellendus
            voluptates.
        </div>
        <div>Alias doloremque ea error eveniet illum libero quae quaerat quasi unde voluptas. Et eveniet incidunt
            perferendis quo voluptates voluptatibus. Accusamus error esse excepturi itaque mollitia natus nobis, quia
            velit voluptatem!
        </div>
        <div>Ab amet aperiam architecto, blanditiis consequatur consequuntur cumque dicta ducimus excepturi facere
            facilis fugiat id iusto laboriosam, laborum modi obcaecati omnis optio quasi quidem quos saepe sint
            temporibus veniam vitae.
        </div>
        <div>Aliquam aspernatur eaque iste laudantium magni minus non numquam qui quis rem repellat repellendus sapiente
            sit, tenetur ullam voluptatibus voluptatum. Amet cumque cupiditate officiis praesentium unde. Quae quaerat
            tempora voluptate.
        </div>
        <div>Dolore numquam recusandae sed voluptates? Eos fuga fugit molestiae quasi, sapiente sed veniam. Ducimus
            eius, nihil quae quas sapiente voluptate? Adipisci consectetur culpa cum doloremque illo quos repellat sequi
            ut.
        </div>
        <div>Architecto at autem commodi consequuntur cupiditate debitis deserunt eum excepturi exercitationem, fugiat
            itaque, magni molestiae molestias natus neque nihil numquam possimus quidem quod rem sed, sequi sit tempora
            ullam ut.
        </div>
        <div>Ab assumenda consequatur cumque, dignissimos distinctio et ipsa laudantium molestias nulla perferendis qui
            quis reiciendis repellendus soluta suscipit. Eius labore, molestiae! Debitis dignissimos dolores doloribus
            ducimus, ex modi nam veritatis.
        </div>
        <div>Autem consequuntur ex fugiat inventore ipsam ipsum libero, molestias mollitia necessitatibus nostrum odio
            officia pariatur quo reprehenderit rerum sint suscipit voluptatibus. A placeat, quas. Aspernatur cupiditate
            iusto mollitia nam voluptate.
        </div>
        <div>Commodi, cupiditate deleniti doloribus enim, fugiat incidunt magni maxime, nam praesentium sapiente totam
            vel? Ad aperiam corporis enim excepturi facilis fuga laudantium minima possimus quis rerum sit unde,
            voluptas voluptatum.
        </div>
        <div>Aut consectetur consequuntur cum cumque eius eum explicabo facere, id illo incidunt itaque iure iusto
            labore libero maiores minima minus nesciunt obcaecati odit perspiciatis placeat porro praesentium reiciendis
            totam voluptas.
        </div>
    </div>
    <script>
        //鼠标点击事件
        let buttonE=document.querySelector('#btn')
        buttonE.addEventListener('click',function(){
            alert('按钮被点击了')
        })
        //鼠标悬停事件
        let h4E=document.querySelector('h4')
        h4E.addEventListener('mouseover',function(){
            console.log('h4被悬停了')
        })
        //window对象是一个浏览器内置的全局对象，它代表当前浏览器窗口
        window.addEventListener('resize',function (){
            alert('窗口被调整了')
        })

        window.addEventListener('scroll',function (){
            alert('窗口被滚动了')
        })
    </script>
</body>
</html>